<template>
  <div class="file-uploader">
    <el-button
      @click="handleUploadClick"
      :disabled="isUploading"
      :type="elButtonType"
      :icon="elButtonIcon"
      :size="elButtonSize"
      v-if="!uploadFilePath && !filePath"
    >
      {{ isUploading ? '上传中...' : '选择文件' }}
    </el-button>

    <!--  展示默认文件  -->
    <div v-if="filePath">
      <div>
        {{ filePath }}
      </div>
    </div>

    <!-- 上传进度显示 -->
    <div
      v-if="uploadProgress > 0 && uploadProgress < 100"
      class="progress-container"
    >
      <div class="progress-bar" :style="{ width: uploadProgress + '%' }">
        <span class="progress-text">{{ uploadProgress }}%</span>
      </div>
    </div>

    <!-- 上传结果 -->
    <div v-if="uploadResult" class="upload-result">
      <div v-if="uploadResult.success" class="success-message">
        <i class="fa fa-check-circle"></i>
        上传成功: {{ uploadResult.data }}
      </div>
      <div v-else class="error-message">
        <i class="fa fa-exclamation-circle"></i>
        上传失败: {{ uploadResult.message }}
      </div>
    </div>
  </div>
</template>
<script>
import index from './index.js';

export default index;
</script>
<style scoped lang="less">
@import 'index';
</style>
